
import { HashRouter as Router, Route, Routes } from "react-router-dom";
// 公共样式
import { GlobalStyle } from "./style";

import Login from "./page/Login";
import Layout from "./page/Layout";
import ItemManagement from './page/ItemManagement'

//antd 中文 以及时间插件moment
import { ConfigProvider, App as AndApp } from "antd";
import "antd/dist/reset.css";
import "dayjs/locale/zh-cn";
import locale from "antd/locale/zh_CN";
import UserRoutes from "./router";

//公共数据
import { useEffect } from "react";
import useAntdSize from "./assets/fun/Antd/useAntdSize";
import { IconGlobalStyle } from "./assets/iconfont/iconfont";
import { useWindowFontSize } from "./assets/fun/Antd/configprovider";


// moment.locale("zh_CN");

function App() {

  useEffect(() => {
    const resizeListener = () => {
      // 定义设计图的尺寸 1920
      let designSize = 1920;
      // 获取 html 元素
      let html = document.documentElement;
      // 定义窗口的宽度
      let clientW = html.clientWidth;
      // html 的fontsize 大小
      let htmlRem = clientW * 10 / designSize;
      html.style.fontSize = htmlRem + 'px';
    }
    resizeListener()
    window.addEventListener('resize', resizeListener);

    return () => {
      window.removeEventListener('resize', resizeListener);
    }
  }, [])


  return (
    <div className="App">
      <GlobalStyle />
      <IconGlobalStyle />
      <AndApp>
        <ConfigProvider
          locale={locale}
          theme={{
            components: useAntdSize(),
            token: {
              borderRadius: 4,
              fontSize: useWindowFontSize(14),
              controlHeight: useWindowFontSize(32)
            },
          }}
        >
          <Router basename="/">
            <Routes>
              <Route path="/" element={<Login />} />
              <Route path="/home" element={<Layout />} />
              <Route path="/itemManagement" element={<ItemManagement />} />
              {UserRoutes()}
            </Routes>
          </Router>
        </ConfigProvider>
      </AndApp>
    </div>
  );
}

export default App;
